<template>
  <div class="alerts-container">
    <el-card shadow="hover">
      <template #header>
        <div class="card-header">
          <span>预警列表</span>
          <el-button type="primary" size="small" @click="handleAddAlert">
            <el-icon><Plus /></el-icon>添加预警规则
          </el-button>
        </div>
      </template>
      
      <template v-if="isMobile">
        <div class="alert-rule-list">
          <el-card v-for="alert in alerts" :key="alert.id" class="alert-rule-card" shadow="hover">
            <div class="alert-rule-header">
              <span class="alert-rule-title">{{ alert.name }}</span>
              <el-tag :type="alert.status === 'active' ? 'success' : 'info'" size="small">
                {{ alert.status === 'active' ? '已启用' : '已禁用' }}
              </el-tag>
            </div>
            <div class="alert-rule-body">
              <div>设备：{{ alert.device }}</div>
              <div>条件：{{ alert.condition }}</div>
            </div>
            <div class="alert-rule-actions">
              <el-button-group>
                <el-button size="small" @click="handleEdit(alert)">编辑</el-button>
                <el-button size="small" type="danger" @click="handleDelete(alert)">删除</el-button>
              </el-button-group>
            </div>
          </el-card>
        </div>
      </template>
      <template v-else>
        <el-table :data="alerts" style="width: 100%">
          <el-table-column prop="name" label="预警名称" />
          <el-table-column prop="device" label="设备" />
          <el-table-column prop="condition" label="触发条件" />
          <el-table-column prop="status" label="状态">
            <template #default="{ row }">
              <el-tag :type="row.status === 'active' ? 'success' : 'info'">
                {{ row.status === 'active' ? '已启用' : '已禁用' }}
              </el-tag>
            </template>
          </el-table-column>
          <el-table-column label="操作" width="200">
            <template #default="{ row }">
              <el-button-group>
                <el-button size="small" @click="handleEdit(row)">编辑</el-button>
                <el-button size="small" type="danger" @click="handleDelete(row)">删除</el-button>
              </el-button-group>
            </template>
          </el-table-column>
        </el-table>
      </template>
    </el-card>

    <!-- 预警规则对话框 -->
    <el-dialog
      v-model="dialogVisible"
      :title="dialogType === 'add' ? '添加预警规则' : '编辑预警规则'"
      width="500px"
    >
      <el-form :model="alertForm" label-width="100px">
        <el-form-item label="预警名称">
          <el-input v-model="alertForm.name" />
        </el-form-item>
        <el-form-item label="设备">
          <el-select v-model="alertForm.device" placeholder="选择设备">
            <el-option label="空调" value="aircon" />
            <el-option label="照明" value="light" />
            <el-option label="通风" value="ventilation" />
          </el-select>
        </el-form-item>
        <el-form-item label="触发条件">
          <el-input v-model="alertForm.condition" />
        </el-form-item>
        <el-form-item label="状态">
          <el-switch v-model="alertForm.status" />
        </el-form-item>
      </el-form>
      <template #footer>
        <span class="dialog-footer">
          <el-button @click="dialogVisible = false">取消</el-button>
          <el-button type="primary" @click="handleSave">确定</el-button>
        </span>
      </template>
    </el-dialog>
  </div>
</template>

<script setup lang="ts">
import { ref, onMounted } from 'vue'
import { Plus } from '@element-plus/icons-vue'
import { ElMessage, ElMessageBox } from 'element-plus'

interface Alert {
  id: number
  name: string
  device: string
  condition: string
  status: 'active' | 'inactive'
}

const alerts = ref<Alert[]>([
  {
    id: 1,
    name: '温度过高预警',
    device: '空调',
    condition: '温度 > 30°C',
    status: 'active'
  },
  {
    id: 2,
    name: '能耗异常预警',
    device: '照明',
    condition: '功率 > 1000W',
    status: 'active'
  }
])

const dialogVisible = ref(false)
const dialogType = ref<'add' | 'edit'>('add')
const alertForm = ref<Partial<Alert>>({
  name: '',
  device: '',
  condition: '',
  status: 'active'
})

const isMobile = ref(false)

onMounted(() => {
  isMobile.value = window.innerWidth <= 600
  window.addEventListener('resize', () => {
    isMobile.value = window.innerWidth <= 600
  })
})

const handleAddAlert = () => {
  dialogType.value = 'add'
  alertForm.value = {
    name: '',
    device: '',
    condition: '',
    status: 'active'
  }
  dialogVisible.value = true
}

const handleEdit = (row: Alert) => {
  dialogType.value = 'edit'
  alertForm.value = { ...row }
  dialogVisible.value = true
}

const handleDelete = (row: Alert) => {
  ElMessageBox.confirm(
    '确定要删除这条预警规则吗？',
    '警告',
    {
      confirmButtonText: '确定',
      cancelButtonText: '取消',
      type: 'warning',
    }
  ).then(() => {
    alerts.value = alerts.value.filter(item => item.id !== row.id)
    ElMessage.success('删除成功')
  })
}

const handleSave = () => {
  if (dialogType.value === 'add') {
    alerts.value.push({
      id: Date.now(),
      ...alertForm.value,
      status: alertForm.value.status ? 'active' : 'inactive'
    } as Alert)
  } else {
    const index = alerts.value.findIndex(item => item.id === alertForm.value.id)
    if (index !== -1) {
      alerts.value[index] = {
        ...alerts.value[index],
        ...alertForm.value,
        status: alertForm.value.status ? 'active' : 'inactive'
      } as Alert
    }
  }
  dialogVisible.value = false
  ElMessage.success(dialogType.value === 'add' ? '添加成功' : '更新成功')
}
</script>

<style scoped>
.alerts-container {
  padding: 20px;
}

.card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.dialog-footer {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
}

.alert-rule-list {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.alert-rule-card {
  margin-bottom: 8px;
}

.alert-rule-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 8px;
}

.alert-rule-title {
  font-weight: bold;
  font-size: 16px;
}

.alert-rule-body {
  margin-bottom: 8px;
  color: #666;
}

.alert-rule-actions {
  display: flex;
  justify-content: flex-end;
}
</style> 